<template>
  <div class="login">
 
  <div class="mian">
    <h2>请登录</h2>
    <el-input v-model="input" placeholder="请输入内容" class="input01"></el-input>
    <el-input placeholder="请输入密码" v-model="pass" show-password class="input01"></el-input>
    <div class="yanzeng">
     <el-input v-model="yz" placeholder="请输入内容" class="input02"></el-input>  验证码
    </div>
     <el-row>
  <el-button type="primary" class="btn" @click="login">登陆</el-button>
</el-row>
  </div>
  </div>
</template>

<script>

export default {
    name:"login",
    data() {
      return {
        input:"",
        pass:"",
        yz:""
      }
    },
    methods:{
      login(){

        var str=`username=${this.input}&password=${this.pass}`
        this.axios.post("login",str).then(res=>{
          console.log(res)
          if(res.data.meta.status==200){
                this.$message({
                message: res.data.meta.msg,
                type: 'success'
                });
                //存储token
                sessionStorage.setItem("token",res.data.data.token);
                sessionStorage.setItem("uname",res.data.data.username);
                //跳转首页
                this.$router.push('/')
          }else{
             this.$message.error(res.data.meta.msg);
          }
        })
      }
    }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .login{
      text-align: center;
       background-image: url("../assets/map.jpg");
       height: 90%;
       background-repeat: no-repeat;
       background-size: contain;
    }
    .mian{
      background-color: #fff;
      width: 300px;
      height: 400px;
      float: right;
      margin-right: 50px;
      margin-top: 40px;
      border-radius: 20px;
    }
    .input01{
      width: 80%;
      height: 30px;
      padding:0 10px;
      margin: 10px auto;
    }
    .btn{
      width: 80%;
    }
    .yanzeng{
      margin:20px 0;
      margin-left: -87px;
    }
    .input02{
      width: 100px;
    }
</style>